<template>
	<view class="pad24">
		<view class="filter-box ">
			<view class="flex-a" @click="storeShow = true">
				<view class="mar-r6">
					全部
				</view>
				<u-icon 
					name="arrow-down" 
					bold 
					color="#000000" 
					size="24rpx"
				></u-icon>
			</view>
		</view>
		<view class="vip-card padlr40 padtb32 mar-t20 pos-rel">
			<view class="vip-head flex-a ju-bt">
				<view class="store-name">
					<view class="name-txt">
						爱美丽美容院
					</view>
					<view class="name-vip mar-t16 flex-a">
						<u--image
							:showLoading="true" 
							:src="getImg('vip-card-icon')"
							width="47rpx" 
							height="48rpx"
						></u--image>
						<view class="block-tit f-s48 mar-l10">
							普通会员
						</view>
					</view>
				</view>
				<view class="head-price flex-a">
					<view class=" flex-col flex-center">
						<view class="price-label">
							卡金
						</view>
						<view class="price-num mar-t16">
							2400
						</view>
					</view>
					<view class="mar-l32 flex-col flex-center">
						<view class="price-label">
							赠金
						</view>
						<view class="price-num mar-t16">
							1000
						</view>
					</view>
				</view>
			</view>
			<view class="head-tips mar-t26">
				会员卡号：2206100257
			</view>
			<view class="head-tips mar-t12 flex-a">
				<text class="mar-r6">会员权益</text>
				<u-icon
					name="arrow-down" 
					color="#666666" 
					size="16rpx"
				></u-icon>
			</view>
			<view class="indate-box flex-center pos-abs">
				长期有效
			</view>
		</view>
		<view 
			class="program-card bor-r24 padlr40 padtb32 mar-t20" 
			v-for="(item, index) in 2" 
			:key="index"
		>
			<view class="card-store flex-a ju-bt">
				<view class="">
					爱美丽美容院
				</view>
				<view class="">
					有效期：无限期
				</view>
			</view>
			<view class="card-name mar-t12 flex-a ju-bt">
				<view class="name-txt">光子嫩肤</view>
				<view class="card-count">
					<text class="f-s40 count-txt">8</text>
					<text>次/共20次</text>
				</view>
			</view>
			<view class="card-tips mar-t12">
				上次消耗时间：2023-10-10
			</view>
			<view class="card-tips mar-t14">
				<view>有效期：2023-01-01至2024-12-31</view>
				
			</view>
		</view>
		
		<u-picker 
			:show="storeShow" 
			keyName="name" 
			:columns="storeList"
			@cancel="storeShow = false"
			@confirm="selectStore"
		></u-picker>
	</view>
</template>

<script> // 我的权益
	export default {
		data() {
			return {
				storeShow: false,
				storeList: [
					[
						{
							name: "全部"
						},
						{
							name: "A店（可用）"
						},
					]
				],
			}
		},
		onLoad() {
			
		},
		methods: {
			selectStore(eve) {
				console.log(eve.value[0], "----store");
			},
		}
	}
</script>

<style lang="scss" scoped>
	.program-card {
		background: #F5F5F5;
		background: linear-gradient( 147deg, #FFF7FD 0%, #F8C6E8 100%);
		.card-store {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #111111;
		}
		.card-tips {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #555555;
		}
		.card-name {
			.card-count {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #111111;
				.count-txt {
					color: #FF7171;
				}
			}
			.name-txt {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 40rpx;
				color: #111111;
			}
		}
	}
	.vip-card {
		background: linear-gradient( 147deg, #FFF7FD 0%, #F8C6E8 100%);
		border-radius: 24rpx;
		.indate-box {
			width: 144rpx;
			height: 48rpx;
			background: #FF7193;
			border-radius: 12rpx 0rpx 0rpx 12rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			right: 0;
			bottom: 32rpx;
		}
		.head-tips {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
		}
		.vip-head {
			.head-price {
				.price-label {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}
				.price-num {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 48rpx;
					color: #000000;
				}
			}
			// .head-store {
				.store-name {
					.name-txt {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #111111;
					}
				}
			// }
		}
	}
	.filter-box {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}
</style>
<style>
	page {
		background: #fff;
	}
</style>
